Following and Preceding XPath are advanced XPath axes used in Selenium to locate web elements based on their relationship with other elements in the HTML DOM. They are especially useful when the target element does not have a unique ID, name, class, or other reliable attribute.
XPath axes allow Selenium testers to move through the DOM and identify elements according to their position and relationship with other nodes. The following axis selects nodes that appear after the current node in the document, while the preceding axis selects nodes that appear before the current node.
For complete Selenium learning and automation testing training, you can explore JustAcademy Selenium Training and register for a course demonstration through JustAcademy Course Demo Registration.
XPath stands for XML Path Language. In Selenium, XPath is commonly used to locate elements inside an HTML document. XPath can identify elements using tags, attributes, text, relationships, indexes, and DOM positions.
XPath becomes particularly useful when normal locators such as ID, name, or class are unavailable or when web applications contain dynamic elements.
//tagname[@attribute='value']Example:
//input[@id='username']This XPath locates an input element whose ID is username.
XPath axes define the relationship between the current node and other nodes in the DOM tree. They allow testers to navigate from one element to another element based on structural relationships.
Common XPath axes include:
Among these axes, following and preceding are useful when the required element is located before or after another known element in the document structure.
The following XPath axis selects all nodes that appear after the current node in the document order, excluding descendants of the current node.
In simple words, if you know one element but cannot directly identify another element that comes after it, you can use the following axis to locate that element.
//currentElement/following::targetElementExample:
//input[@id='username']/following::inputThis XPath starts from the input element with ID username and searches for input elements that appear later in document order.
Consider the following HTML structure:
<div>
<input id="username">
<input id="email">
<input id="password">
<button>Login</button>
</div>
If the username field is known but the email field does not have a reliable locator, you can use:
//input[@id='username']/following::input[1]The XPath starts from the username input and searches for the first input element appearing after it.
The following axis is not limited to elements having the same parent. It can navigate to elements appearing later in the document order.
You can combine the following axis with attributes to make the XPath more specific.
//input[@name='username']/following::input[@name='password']This searches for an input with the name password that appears after the username input.
Another example:
//label[@for='username']/following::input[1]This can be useful when a label is easier to identify than the input field itself.
The text() function can be combined with the following axis when visible text provides a stable reference.
//label[text()='Username']/following::input[1]This XPath finds the first input element appearing after the label containing the text Username.
Another example:
//h2[text()='Personal Information']/following::input[1]This locates the first input element appearing after the heading containing Personal Information.
When multiple elements are returned by a following-axis expression, an index can be used to select a specific element.
//input[@id='username']/following::input[1]The [1] selects the first matching input element in the result.
Example:
//input[@id='username']/following::input[2]The [2] selects the second matching input element.
Indexes should be used carefully because changes in page structure can change the order of matching elements.
The preceding XPath axis selects nodes that appear before the current node in document order, excluding ancestors of the current node.
In simple words, if you can identify an element that comes later in the document but the target element appears before it, the preceding axis can be used to navigate backward.
//currentElement/preceding::targetElementExample:
//input[@id='password']/preceding::inputThis XPath searches for input elements that appear before the password input in document order.
Consider this HTML:
<div>
<input id="username">
<input id="email">
<input id="password">
<button>Login</button>
</div>
If the password input is easy to identify but the email input does not have a unique attribute, you can use:
//input[@id='password']/preceding::input[1]The XPath searches backward from the password input and selects a matching input element that appears before it.
You can combine the preceding axis with attributes.
//input[@name='password']/preceding::input[@name='username']This searches for a username input appearing before the password input.
Another example:
//button[@id='submit']/preceding::input[@type='email']This searches for an email input appearing before the submit button.
Text-based XPath can also be combined with the preceding axis.
//button[text()='Submit']/preceding::input[1]This searches for the first matching input that appears before the Submit button.
Another example:
//h2[text()='Payment Details']/preceding::input[1]This can locate an input appearing before the Payment Details heading.
| Feature | Following | Preceding |
|---|---|---|
| Direction | Moves forward | Moves backward |
| Document position | Elements after current node | Elements before current node |
| Typical use | Find an element located after a known element | Find an element located before a known element |
| Syntax | following:: | preceding:: |
| Navigation | Forward through document order | Backward through document order |
following and following-sibling are different XPath axes.
The following axis searches elements appearing later in the document, while following-sibling searches only sibling elements that share the same parent.
//div[@id='first']/following::div//div[@id='first']/following-sibling::divUse following-sibling when the target is specifically a sibling of the current element. Use following when the target may exist elsewhere later in the document.
Similarly, preceding and preceding-sibling are different.
//div[@id='last']/preceding::div//div[@id='last']/preceding-sibling::divThe preceding-sibling axis only searches siblings of the current node, while preceding can navigate to nodes earlier in document order.
Following can be combined with parent navigation to locate related elements.
//label[text()='Username']/parent::div/following::div[1]This first moves from the label to its parent and then searches for a div appearing later in the document.
The preceding axis can also be combined with parent relationships.
//input[@id='password']/parent::div/preceding::div[1]This first moves to the parent div and then searches backward for a preceding div.
Following can be combined with descendant navigation when the target exists inside a later container.
//h2[text()='Products']/following::div[1]//buttonThis identifies a div appearing after the Products heading and then searches inside that div for a button.
The same approach can be used in the reverse direction.
//button[text()='Checkout']/preceding::div[1]//inputThis searches backward for a preceding div and then searches inside it for input elements.
Following XPath is useful in login forms when labels or headings are easier to identify than form controls.
<label>Username</label>
<input type="text">
<label>Password</label>
<input type="password">
Example:
//label[text()='Username']/following::input[1]For password:
//label[text()='Password']/following::input[1]If the password field is easy to identify and you need an earlier input field, preceding can be used.
//input[@type='password']/preceding::input[1]This searches for an input appearing before the password field.
E-commerce websites frequently contain repeated products, prices, buttons, and product cards. Following XPath can help navigate between related elements when the DOM structure is complex.
Example:
//h3[text()='Laptop']/following::button[text()='Add to Cart'][1]This searches for an Add to Cart button appearing after the Laptop heading.
Another example:
//span[text()='Wireless Mouse']/following::button[contains(text(),'Cart')][1]This can locate a cart-related button after a product name.
Preceding XPath can be useful when the product name or price is located before a button or other element.
//button[text()='Add to Cart']/preceding::h3[1]This searches backward for the nearest matching heading before the Add to Cart button.
Tables can contain rows and columns where direct attributes are not always unique. XPath axes can help navigate from known table content to related elements.
//td[text()='John']/following-sibling::td[1]For elements outside the immediate sibling relationship, following can be used:
//td[text()='John']/following::td[1]The exact axis should be selected according to the structure of the table.
Preceding can be used when the target table element occurs earlier in the document.
//td[text()='Completed']/preceding::td[1]This searches backward for a preceding table cell.
The contains() function can make an XPath more flexible when the complete attribute value is dynamic.
//div[contains(@class,'product')]/following::button[contains(@class,'cart')][1]This finds a cart-related button after a product-related div.
//button[contains(@class,'submit')]/preceding::input[contains(@name,'email')][1]This searches backward from a submit button for an email-related input.
The starts-with() function can be used when an attribute begins with a known value.
//input[starts-with(@id,'user')]/following::input[1]This identifies an input whose ID begins with user and then searches for a following input.
//button[starts-with(@id,'submit')]/preceding::input[1]This searches backward from a button whose ID starts with submit.
Multiple conditions can be combined using and and or.
//input[@type='text' and @name='username']/following::input[@type='password'][1]This starts from a username input satisfying two conditions and searches for a following password input.
//button[@type='submit' and contains(@class,'login')]/preceding::input[@type='text'][1]This searches backward from a login submit button for the first matching text input.
After creating an XPath, Selenium can use the By.xpath() locator to identify the element.
WebElement passwordField = driver.findElement(
By.xpath("//label[text()='Password']/following::input[1]")
);
passwordField.sendKeys("Password@123");
Example using preceding:
WebElement usernameField = driver.findElement(
By.xpath("//input[@type='password']/preceding::input[1]")
);
usernameField.sendKeys("testuser");
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
public class FollowingPrecedingExample {
public static void main(String[] args) {
WebDriver driver = new ChromeDriver();
driver.get("https://example.com");
WebElement password = driver.findElement(
By.xpath("//label[text()='Password']/following::input[1]")
);
password.sendKeys("Password@123");
WebElement username = driver.findElement(
By.xpath("//input[@type='password']/preceding::input[1]")
);
username.sendKeys("testuser");
driver.quit();
}
}
Dynamic websites may load elements after the initial page load. In such situations, explicit waits can be used before interacting with elements.
WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
WebElement password = wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.xpath("//label[text()='Password']/following::input[1]")
)
);
password.sendKeys("Password@123");
Explicit waits help synchronize the test with the application's actual state instead of relying only on fixed delays.
Modern web applications can generate dynamic IDs, classes, and containers. In such applications, a tester may identify a stable element and navigate to the required dynamic element using XPath relationships.
For example:
//label[contains(text(),'Email')]/following::input[1]Instead of depending on a generated ID, the XPath uses visible label text as the reference point.
Form layouts often contain labels followed by input controls. Following XPath is useful for this pattern.
//label[text()='Email']/following::input[1]For reverse navigation:
//input[@type='email']/preceding::label[1]The second XPath searches for a label that occurs before the email input.
//label[text()='First Name']/following::input[1]
//label[text()='Last Name']/following::input[1]
//label[text()='Email']/following::input[1]
//label[text()='Password']/following::input[1]
These expressions can be useful when the labels are stable but the input attributes are dynamic.
The normalize-space() function removes leading and trailing whitespace and normalizes consecutive whitespace characters.
//label[normalize-space()='Username']/following::input[1]For reverse navigation:
//input[@type='password']/preceding::label[normalize-space()='Password'][1]This is useful when HTML formatting contains unwanted whitespace around visible text.
| Axis | Meaning |
|---|---|
| following | Selects nodes appearing later in document order, excluding descendants |
| descendant | Selects nodes inside the current node at any depth |
Example:
//div[@id='container']/descendant::buttonFollowing example:
//div[@id='container']/following::button| Axis | Meaning |
|---|---|
| preceding | Selects nodes appearing earlier in document order, excluding ancestors |
| ancestor | Selects parent, grandparent, and higher-level elements of the current node |
Example:
//input[@id='email']/ancestor::formPreceding example:
//input[@id='email']/preceding::h2Chrome DevTools provides a convenient way to test XPath expressions before adding them to Selenium code.
$x("//label[text()='Username']/following::input[1]")For preceding:
$x("//input[@type='password']/preceding::input[1]")The returned elements can then be inspected to verify whether the XPath identifies the intended element.
Suppose a login page contains the following structure:
<div class="form-group">
<label>Username</label>
<input type="text">
</div>
<div class="form-group">
<label>Password</label>
<input type="password">
</div>
<button>Login</button>
Username field:
//label[text()='Username']/following::input[1]Password field:
//label[text()='Password']/following::input[1]Previous input from the Login button:
//button[text()='Login']/preceding::input[1]Suppose a product page displays a product name followed by price and an Add to Cart button.
<h3>Laptop</h3>
<span>$800</span>
<button>Add to Cart</button>
Find the price after the product name:
//h3[text()='Laptop']/following::span[1]Find the Add to Cart button:
//h3[text()='Laptop']/following::button[1]Find the product name before the Add to Cart button:
//button[text()='Add to Cart']/preceding::h3[1]Consider a registration page where labels are stable but generated input IDs change.
//label[normalize-space()='Email']/following::input[1]This approach can be more useful than relying on a generated ID such as input_92837.
Reverse navigation can be performed using:
//input[@type='email']/preceding::label[1]The following axis selects nodes that occur after the current node in document order, excluding descendants of the current node.
The preceding axis selects nodes that occur before the current node in document order, excluding ancestors of the current node.
//label[text()='Email']/following::input[1]//button[text()='Submit']/preceding::input[1]Following can select nodes appearing later in document order, while following-sibling selects only sibling nodes that share the same parent.
Preceding selects nodes appearing earlier in document order, while preceding-sibling selects only previous sibling nodes of the current element.
| Requirement | XPath |
|---|---|
| Element after current element | //element/following::tag |
| Element before current element | //element/preceding::tag |
| First following element | //element/following::tag[1] |
| First preceding element | //element/preceding::tag[1] |
| Following input after label | //label/following::input[1] |
| Input before button | //button/preceding::input[1] |
| Following with text | //label[text()='Email']/following::input[1] |
| Preceding with text | //button[text()='Submit']/preceding::input[1] |
| Following with contains | //div[contains(@class,'product')]/following::button[1] |
| Preceding with contains | //button[contains(@class,'submit')]/preceding::input[1] |
Following and preceding are powerful XPath axes for navigating complex web pages in Selenium. The following axis helps locate elements that occur after a reference node, while the preceding axis helps locate elements that occur before it.
These axes are especially useful for forms, tables, product pages, dynamic web applications, and situations where the target element does not have a stable unique locator. Understanding the difference between following, preceding, following-sibling, and preceding-sibling helps testers create more accurate and maintainable XPath expressions.
For structured Selenium automation training, practical projects, WebDriver, XPath, TestNG, Page Object Model, framework development, and interview preparation, visit JustAcademy Selenium Training.
To explore the available course demonstration option, visit JustAcademy Course Demo Registration.
